<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-shopping-bag-2"></i> 订单管理 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-select v-model="query.status" placeholder="选择订单状态" class="mr10">
          <el-option label="全部" value=""></el-option>
          <el-option label="待联系" value="0"></el-option>
          <el-option label="已联系" value="1"></el-option>
          <el-option label="符合已预约" value="2"></el-option>
          <el-option label="不符合" value="3"></el-option>
          <el-option label="完成" value="4"></el-option>
        </el-select>
        <el-date-picker v-model="query.time" class="mr10" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-input v-model="query.kw" placeholder="请输入订单号/产品名称/客户经理查询" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="souClick">搜索</el-button>
      </div>
      <el-table :data="tableData" class="table" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">

            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="申请人姓名：">
                <span>{{props.row.mobileUser.name}}</span>
              </el-form-item>
              <el-form-item label="申请人电话：">
                <span>{{props.row.mobileUser.phone}}</span>
              </el-form-item>
              <el-form-item label="申请额度：">
                <span>{{props.row.orderProduct.opQuota}}</span>
              </el-form-item>
              <el-form-item label="还款方式：">
                <span>{{props.row.orderProduct.opRepayment}}</span>
              </el-form-item>
              <el-form-item label="指定客户经理：">
                <span>{{props.row.manager.managerName}}</span>
              </el-form-item>
              <el-form-item label="状态更新时间：">
                <span>{{props.row.oiUpdateTime}}</span>
              </el-form-item>
              <el-form-item label="不符合原因：" v-if="props.row.oiAuditStatus == '3'">
                <span style="color:red;">{{props.row.oiFailReason}}</span>
              </el-form-item>
              <el-form-item label="完成额度：" v-if="props.row.oiAuditStatus == '4'">
                <span style="color:red;">{{props.row.orderProduct.opLoanQuota}}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="oiOrderNum" label="订单号" width="200"></el-table-column>
        <el-table-column prop="orderProduct.opProductName" label="产品名称" width="260"></el-table-column>
        <el-table-column prop="orderProduct.opQuota" label="申请额度" width="200"></el-table-column>
        <el-table-column prop="manager.managerName" label="指定客户经理" width="200"></el-table-column>
        <el-table-column prop="oiApplyTime" label="申请时间" width="200"></el-table-column>
        <el-table-column prop="name" label="状态" fixed="right" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.oiAuditStatus == '0'">待联系</el-tag>
            <el-tag v-if="scope.row.oiAuditStatus == '1'">已联系</el-tag>
            <el-tag v-if="scope.row.oiAuditStatus == '2'">符合已预约</el-tag>
            <el-tag v-if="scope.row.oiAuditStatus == '3'" type="danger">不符合</el-tag>
            <el-tag v-if="scope.row.oiAuditStatus == '4'">完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" fixed="right" width="120">
          <template slot-scope="scope">
            <el-button v-if="scope.row.oiAuditStatus == '0'" type="text" icon="el-icon-setting" @click="contactClick(scope.row.oiId)">已联系</el-button>
            <el-button v-if="scope.row.oiAuditStatus == '1'" type="text" icon="el-icon-setting" @click="AWClick(scope.row.oiId)">符合条件</el-button>
            <el-button v-if="scope.row.oiAuditStatus == '1'" type="text" icon="el-icon-setting" @click="accordWithBtnClick(scope.row.oiId)">不符合条件
            </el-button>
            <el-button v-if="scope.row.oiAuditStatus == '2'" type="text" icon="el-icon-setting" @click="okBtnClick(scope.row.oiId);">完成放款</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="query.totalCount"
                       :pager-count="5" @current-change="PageChange" @prev-click="PageChange" @next-click="PageChange"></el-pagination>
      </div>
    </div>

    <!-- 不符合理由弹出 -->
    <el-dialog title="不符合原因" :visible.sync="accordWithFlg" width="30%">
      <div>
        <el-input type="textarea" :rows="3" v-model="accordWithText" placeholder="请输入不符合条件的原因"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="accordWithFlg = false">取 消</el-button>
        <el-button type="primary" @click="accordWithSub" :loading="accordWithLoad">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 完成填写额度 -->
    <el-dialog title="完成批款额度" :visible.sync="okFlg" width="30%">
      <div>
        <el-input v-model="okText" placeholder="请输入实际批款额度"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="okFlg = false">取 消</el-button>
        <el-button type="primary" @click="okSub" :loading="okLoad">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { orderListInit, orderListContactClick, accordWithClick, unAccordWithClick, completeClick } from "../../../api/index";
export default {
  data() {
    return {
      query: {
        page: 1,
        limit: 10,
        time: [],
        totalCount: 0,
        status: "",
        kw: '',
      },
      tableData: [],
      editId: '',
      //不符合
      accordWithLoad: false,
      accordWithFlg: false,
      accordWithText: '',
      //完成
      okLoad: false,
      okFlg: false,
      okText: '',
    };
  },
  created() {
    this.getInit();
  },
  methods: {
    //初始化
    getInit() {
      let query = {
        page: this.query.page,
        limit: this.query.limit,
        startTime: this.query.time ? this.query.time[0] : '',
        endTime: this.query.time ? this.query.time[1] : '',
        kw: this.query.kw,
        auditStatus: this.query.status,
      }
      orderListInit(query).then(res => {
        if (res.code == 0) {
          this.tableData = res.recordList;
          this.query.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    //翻页
    PageChange(num) {
      this.query.page = num;
      this.getInit();
    },
    //点击已联系
    contactClick(id) {
      orderListContactClick({ oiId: id }).then(res => {
        if (res.code == 0) {
          this.$message.success("状态修改成功");
          this.getInit();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //点击符合
    AWClick(id) {
      this.$confirm('确定符合条件吗？', '是否符合条件', {
        type: 'warning',
      }).then(() => {
        accordWithClick({ oiId: id }).then(res => {
          if (res.code == 0) {
            this.$message.success("状态修改成功");
            this.getInit();
          } else {
            this.$message(res.msg);
          }
        })
      })
    },
    //不符合点击状态
    accordWithBtnClick(id) {
      this.editId = id;
      this.accordWithFlg = true;
      this.accordWithText = "";
    },
    //不符合理由提交
    accordWithSub() {
      if (!this.accordWithText) {
        this.$message("请填写理由");
        return false;
      }
      this.accordWithLoad = true;
      unAccordWithClick({ oiId: this.editId, reason: this.accordWithText }).then(res => {
        this.accordWithLoad = false;
        if (res.code == 0) {
          this.accordWithFlg = false;
          this.$message.success("状态修改成功");
          this.getInit();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //完成按钮点击
    okBtnClick(id) {
      this.editId = id;
      this.okFlg = true;
      this.okText = "";
    },
    //录入提交
    okSub() {
      if (!this.okText) {
        this.$message("请填写额度");
        return false;
      }
      this.okLoad = true;
      completeClick({ oiId: this.editId, quota: this.okText }).then(res => {
        this.okLoad = false;
        if (res.code == 0) {
          this.okFlg = false;
          this.$message.success("状态修改成功");
          this.getInit();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //点击搜索
    souClick() {
      this.query.page = 1;
      this.getInit();
    }
  }
};
</script>

<style scoped>
.handle-input {
    width: 300px;
    display: inline-block;
}
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 25%;
    margin-right: 5%;
}
</style>
